var User = new Ext.extend(Ext.Panel, {
	border : false,
	layout : 'border',
	initComponent : function() {
		this.initGrid();
		this.initRoleSelector();
		this.items = [this.grid, this.rs];
		User.superclass.initComponent.call(this);
	},
	addOrUpdate : function(isAdd) {
		var me = this;
		if (this.win) {
			this.win.close();
		}
		var rec = this.grid.getRecord();
		if (!isAdd) {
			if (!rec) {
				TopMy.alert('请选择要修改的记录！');
				return;
			}
		}
		this.form = new TopExt.FormPanel({
					border : false,
					autoScroll : true,
					padding : 5,
					defaults : {
						xtype : 'textfield',
						anchor : '100%'
					},
					labelWidth : 70,
					labelAlign : 'right',
					items : [{
								xtype : 'hidden',
								name : 'userid'
							}, {
								name : 'name',
								fieldLabel : '姓&emsp;&emsp;名',
								allowBlank : false
							}, {
								name : 'username',
								fieldLabel : '用&ensp;户&ensp;名',
								allowBlank : false
							}, {
								xtype : 'radiogroup',
								name : 'sex',
								fieldLabel : '性&emsp;&emsp;别',
								items : [{
											name : 'sex',
											boxLabel : '男',
											inputValue : '1',
											checked : true
										}, {
											name : 'sex',
											boxLabel : '女',
											inputValue : '2'
										}]
							}, {
								xtype : 'datefield',
								name : 'birthday',
								fieldLabel : '出生日期',
								format : 'Y-m-d',
								maxValue : new Date()
							}],
					listeners : {
						afterrender : function(t) {
							if (!isAdd) {
								t.getForm().loadRecord(rec);
							}
						}
					}
				});
		this.win = new TopExt.Window({
					title : isAdd ? '新增用户信息' : '更新用户信息',
					width : 380,
					autoHeight : true,
					modal : true,
					items : [this.form],
					buttons : [{
								text : '保存',
								iconCls : 'icon-save',
								handler : function() {
									var url = My
											.url('/system/permis/user/add.do');
									if (!isAdd) {
										url = My
												.url('/system/permis/user/update.do');
									}
									TopMy.submit(me.form, {
												url : url,
												successCallback : function() {
													me.win.close();
													me.grid.getStore().reload();
												}
											});
								}
							}, {
								text : '取消',
								iconCls : 'icon-cancel',
								handler : function() {
									me.win.close();
								}
							}]
				});
		this.win.show();
		return this.form;
	},
	initRoleSelector : function() {
		var is = new Ext.ux.ItemSelector({
			imagePath : My.url('/common/extjs/ux/images/'),
			multiselects : [{
				legend : '待选择角色',
				width : 250,
				height : 500,
				store : new Ext.data.JsonStore({
							url : My
									.url('/system/permis/role/getRoleListNotUser.do'),
							fields : ['roleid', 'rolename'],
							root : 'data',
							baseParams : {}
						}),
				displayField : 'rolename',
				valueField : 'roleid'
			}, {
				legend : '已选择角色',
				width : 250,
				height : 500,
				store : new Ext.data.JsonStore({
					url : My.url('/system/permis/role/getRoleListByUser.do'),
					fields : ['roleid', 'rolename'],
					root : 'data',
					baseParams : {},
					listeners : {
						add : function(s, recs) {
							var roleids = [];
							Ext.each(recs, function(rec) {
										roleids.push(rec.data.roleid);
									});
							My.request({
										loadMask : false,
										url : My
												.url('/system/permis/user/setRole.do'),
										params : {
											userid : s.baseParams.userid,
											roleid : roleids[0]
										},
										success : Ext.emptyFn
									});
						},
						remove : function(s, rec) {
							My.request({
								loadMask : false,
								url : My
										.url('/system/permis/user/removeRole.do'),
								params : {
									userid : s.baseParams.userid,
									roleid : rec.data.roleid
								},
								success : Ext.emptyFn
							});
						}
					}
				}),
				displayField : 'rolename',
				valueField : 'roleid'
			}]
		});
		this.rs = new Ext.Panel({
					autoScroll : true,
					title : '角色配置',
					region : 'east',
					width : 535,
					split : true,
					padding : '3px 5px 1px 5px',
					bodyStyle : 'border-bottom:0;border-right:0;',
					headerStyle : 'border-top:0;border-right:0;',
					items : [is],
					getItemSelector : function() {
						return is;
					}
				});
	},
	initGrid : function() {
		var me = this;
		var store = new Ext.data.JsonStore({
					fields : ['userid', 'username', 'password', 'name', 'sex',
							{
								name : 'birthday',
								convert : My.dateRenderer()
							}, 'disabled'],
					url : My.url('/system/permis/user/getUserList.do'),
					root : 'data',
					autoLoad : true
				});
		this.grid = new Ext.grid.EditorGridPanel({
					region : 'center',
					boxMinWidth : 480,
					loadMask : true,
					getRecord : function() {
						return me.grid.getSelectionModel().getSelected();
					},
					store : store,
					viewConfig : {
						forceFit : true
					},
					sm : new Ext.grid.RowSelectionModel({
								listeners : {
									rowselect : function(t, i, r) {
										var sdbar = me.grid.getTopToolbar()
												.getComponent('set_disabled');
										var disabled = r.data.disabled;
										if (disabled == '1') {
											sdbar.setText('启用');
											sdbar.setIconClass('icon-enabled');
										} else {
											sdbar.setText('禁用');
											sdbar.setIconClass('icon-disabled');
										}
										// 加载角色
										var rec = me.grid.getStore().getAt(i);
										var is = me.rs.getItemSelector();
										var leftStore = is.multiselects[0].store;
										var rightStore = is.multiselects[1].store;
										leftStore.baseParams.userid = rec.data.userid;
										rightStore.baseParams.userid = rec.data.userid;
										leftStore.load();
										rightStore.load();
									}
								}
							}),
					cm : new Ext.grid.ColumnModel({
								defaults : {
									align : 'center'
								},
								columns : [{
											dataIndex : 'name',
											header : '姓名',
											width : 150
										}, {
											dataIndex : 'username',
											header : '用户名'
										}, {
											dataIndex : 'sex',
											header : '性别',
											renderer : function(v) {
												if (v == '1') {
													return '男';
												}
												return '女';
											}
										}, {
											dataIndex : 'birthday',
											header : '出生日期'
										}, {
											dataIndex : 'disabled',
											header : '是否有效',
											renderer : function(v, m) {
												if (v == '1') {
													m.attr = 'style="color:red;"';
													return '无效';
												}
												m.attr = 'style="color:green;"';
												return '有效';
											}
										}]
							}),
					bodyStyle : 'border-left:0;border-bottom:0;',
					tbar : new Ext.Toolbar({
								style : 'border-left:0;border-top:0;',
								items : [{
											text : '新增',
											iconCls : 'icon-add',
											handler : function() {
												me.addOrUpdate(true);
											}
										}, {
											text : '修改',
											iconCls : 'icon-update',
											handler : function() {
												me.addOrUpdate();
											}
										}, {
											text : '禁用',
											itemId : 'set_disabled',
											iconCls : 'icon-disabled',
											handler : function() {
												if (this.iconCls == 'icon-disabled') {
													me.setDisabled(true, this);
												} else {
													me.setDisabled(false, this);
												}
											}
										}, {
											text : '删除',
											iconCls : 'icon-delete',
											handler : function() {
												me.dele();
											}
										}, '-', {
											xtype : 'searchfield',
											name : 'name',
											store : store
										}]
							}),
					listeners : {
						rowclick : function(g, i, e) {
						}
					}
				});
	},
	setDisabled : function(disabled, sbbar) {
		var me = this;
		var rec = me.grid.getRecord();
		if (disabled) {
			if (!rec) {
				My.alert('请选择要禁用的用户信息！');
				return;
			}
			My.confirm('确定要禁用该用户吗？', function(btn) {
						if (btn == 'no') {
							return;
						}
						My.request({
									url : My
											.url('/system/permis/user/setDisabled.do'),
									params : {
										userid : rec.data.userid,
										disabled : '1'
									},
									successCallback : function() {
										sbbar.setText('启用');
										sbbar.setIconClass('icon-enabled');
										me.grid.getStore().reload();
									}
								});
					});
		} else {
			if (!rec) {
				My.alert('请选择要启用的用户信息！');
				return;
			}
			My.request({
						url : My.url('/system/permis/user/setDisabled.do'),
						params : {
							userid : rec.data.userid,
							disabled : '0'
						},
						successCallback : function() {
							sbbar.setText('禁用');
							sbbar.setIconClass('icon-disabled');
							me.grid.getStore().reload();
						}
					});
		}
	},
	dele : function() {
		var me = this;
		var rec = me.grid.getRecord();
		if (!rec) {
			My.alert('请选择要删除的用户信息 ！');
			return;
		}
		My.confirm('确定要删除该用户吗？', function(btn) {
					if (btn == 'no') {
						return;
					}
					My.request({
								url : My.url('/system/permis/user/delete.do'),
								params : {
									userid : rec.data.userid
								},
								successCallback : function() {
									me.grid.getStore().reload();
								}
							});
				});
	}
});

Ext.onReady(function() {
			new Ext.Viewport({
						layout : 'fit',
						items : [new User()]
					});
		});